<%--
  Created by IntelliJ IDEA.
  User: 11843
  Date: 2024/12/30
  Time: 8:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        var chart = echarts.init(document.getElementById('main'));

        function fetchData() {
            fetch('haha')
                .then(response => response.json())
                .then(data => {
                    console.log('Received data:', data); // 调试信息
                    const maleIn101 = data.find(d => d.gender === '1' && d.class_id === '101')?.count || 0;
                    const femaleIn101 = data.find(d => d.gender === '0' && d.class_id === '101')?.count || 0;
                    const maleIn102 = data.find(d => d.gender === '1' && d.class_id === '102')?.count || 0;
                    const femaleIn102 = data.find(d => d.gender === '0' && d.class_id === '102')?.count || 0;
                    const maleIn103 = data.find(d => d.gender === '1' && d.class_id === '103')?.count || 0;
                    const femaleIn103 = data.find(d => d.gender === '0' && d.class_id === '103')?.count || 0;
                    const maleIn104 = data.find(d => d.gender === '1' && d.class_id === '104')?.count || 0;
                    const femaleIn104 = data.find(d => d.gender === '0' && d.class_id === '104')?.count || 0;

                    chart.setOption({
                        title: {
                            text: '各个班级的男女生人数',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    { value: maleIn101, name: 'maleIn101' },
                                    { value: femaleIn101, name: 'femaleIn101' },
                                    { value: maleIn102, name: 'maleIn102' },
                                    { value: femaleIn102, name: 'femaleIn102' },
                                    { value: maleIn103, name: 'maleIn103' },
                                    { value: femaleIn103, name: 'femaleIn103' },
                                    { value: maleIn104, name: 'maleIn104' },
                                    { value: femaleIn104, name: 'femaleIn104' }

                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                })
                .catch(error => console.error('Error fetching data:', error));
        }

        // 初始加载数据
        fetchData();
        // 定时刷新数据
        setInterval(fetchData, 2000);
    });
</script>
</body>
</html>
